<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Apifox WebSocket测试指南 (纯WebSocket)</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow: auto;
        }
        .note {
            background-color: #ffffd0;
            padding: 10px;
            border-left: 4px solid #ffcc00;
            margin: 10px 0;
        }
        .info {
            background-color: #e0f0ff;
            padding: 10px;
            border-left: 4px solid #0088ff;
            margin: 10px 0;
        }
        h2 {
            margin-top: 30px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        code {
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>Apifox WebSocket测试指南 (纯WebSocket版)</h1>
    
    <div class="info">
        <strong>注意：</strong> 此指南使用的是纯WebSocket通信，不需要STOMP协议，更适合直接使用JSON格式通信。
    </div>
    
    <div class="note">
        <strong>两种WebSocket端点:</strong>
        <ul>
            <li><code>/ws</code> - 使用STOMP协议的WebSocket</li>
            <li><code>/wsraw</code> - 纯WebSocket，直接使用JSON格式</li>
        </ul>
        <p>本指南使用的是 <code>/wsraw</code> 端点，支持直接的JSON通信。</p>
    </div>
    
    <h2>1. 连接WebSocket</h2>
    <p>在Apifox中创建WebSocket请求，输入以下URL：</p>
    <pre>ws://localhost:8080/wsraw</pre>
    
    <h2>2. 创建会话</h2>
    <p>连接成功后，发送以下JSON格式的消息创建会话：</p>
    <pre>{
  "action": "createSession",
  "customerId": "cs001",
  "modelServiceName": "doubaoService"
}</pre>
    
    <div class="note">
        <strong>说明:</strong> 
        <ul>
            <li><code>action</code>: 表示要执行的操作，这里是创建会话</li>
            <li><code>customerId</code>: 客服ID</li>
            <li><code>modelServiceName</code>: 使用的模型服务名称，默认为doubaoService</li>
        </ul>
    </div>
    
    <h2>3. 发送消息</h2>
    <p>创建会话成功后，服务器会返回一个会话ID。使用这个会话ID发送消息：</p>
    <pre>{
  "action": "sendMessage",
  "sessionId": "这里填写实际的会话ID",
  "customerId": "cs001",
  "content": "你好",
  "modelType": "normal",
  "responseType": "stream"
}</pre>
    
    <div class="note">
        <strong>说明:</strong> 
        <ul>
            <li><code>action</code>: 表示要执行的操作，这里是发送消息</li>
            <li><code>sessionId</code>: 会话ID，从创建会话的响应中获取</li>
            <li><code>customerId</code>: 客服ID</li>
            <li><code>content</code>: 消息内容</li>
            <li><code>modelType</code>: 模型类型，可选值为normal（普通）或think（深度思考）</li>
            <li><code>responseType</code>: 响应类型，可选值为stream（流式）或sync（同步）</li>
        </ul>
    </div>
    
    <h2>4. 测试WebSocket连接</h2>
    <p>可以发送以下消息测试WebSocket连接是否正常：</p>
    <pre>{
  "action": "test",
  "customerId": "cs001"
}</pre>
    
    <h2>服务器响应格式</h2>
    <p>服务器的响应都是JSON格式，包含type字段标识响应类型：</p>
    
    <h3>连接成功响应</h3>
    <pre>{
  "type": "CONNECTED",
  "message": "连接成功"
}</pre>
    
    <h3>测试响应</h3>
    <pre>{
  "type": "TEST_RESPONSE",
  "message": "这是一个测试响应",
  "timestamp": 1623456789000
}</pre>
    
    <h3>会话创建成功</h3>
    <pre>{
  "type": "SESSION_CREATED",
  "sessionId": "robot_12345678_cs001",
  "firstMessage": "你好，我是客户robot_12345678，请问有什么可以帮助我的吗？"
}</pre>
    
    <h3>流式响应片段</h3>
    <pre>{
  "type": "RESPONSE_CHUNK",
  "sessionId": "robot_12345678_cs001",
  "content": "这是"
}
{
  "type": "RESPONSE_CHUNK",
  "sessionId": "robot_12345678_cs001",
  "content": "一个"
}
{
  "type": "RESPONSE_CHUNK",
  "sessionId": "robot_12345678_cs001",
  "content": "流式响应"
}</pre>
    
    <h3>流式响应完成</h3>
    <pre>{
  "type": "RESPONSE_COMPLETE",
  "sessionId": "robot_12345678_cs001"
}</pre>
    
    <h3>同步响应</h3>
    <pre>{
  "type": "FULL_RESPONSE",
  "sessionId": "robot_12345678_cs001",
  "content": "这是一个完整的响应"
}</pre>
    
    <h3>错误响应</h3>
    <pre>{
  "type": "ERROR",
  "message": "错误信息"
}</pre>
    
    <h2>测试页面</h2>
    <p>您可以使用我们提供的测试页面来测试纯WebSocket通信：</p>
    <p><a href="/websocket-raw.html" target="_blank">纯WebSocket测试页面</a></p>
    
    <h2>STOMP vs 纯WebSocket</h2>
    <div class="info">
        <strong>为什么提供两种通信方式?</strong>
        <p>Spring默认使用STOMP协议实现WebSocket，它提供了更多的功能，如消息路由、订阅等。但STOMP协议格式较为严格，对于一些客户端可能不友好。</p>
        <p>纯WebSocket通信使用普通的JSON格式，更易于集成，尤其是在移动端或非浏览器环境中。</p>
    </div>
</body>
</html> 